<template>
  <div class="songDetailLeft">
    <div class="datail-header flex">
      <div class="detail-img">
        <img :src="songDetail.coverImgUrl" alt="" />
      </div>
      <div class="song-detail ">
        <div class="detail-title flex">
          <i class="icons"></i>
          <h2 class="title-h">{{songDetail.name}}</h2>
        </div>
        <div class="detail-user">
          <img :src="songDetail.creator && songDetail.creator.avatarUrl" alt="" />
          <span class="detail-userName">{{songDetail.creator?songDetail.creator.nickname:"未知用户"}}</span>
          <span class="avatar-datetime">{{createTime}} 创建</span>
        </div>
        <Controller :detail="detail"/>
        <div class="detail-tag">
          <b>标签：</b>
          <el-tag v-for="tags in songDetail.tags" :key="tags" type="info" size="small" >{{tags}}</el-tag>
        </div>
        <p class="Introduction">介绍： {{songDetail.description}}</p>
        <!-- <div>
            <a href=""></a>
        </div> -->
      </div>
    </div>
    <SongList
    :isRanking="false"
     :songListDetail="songListDetail"
     :songList="songDetail.tracks"
     />
  </div>
</template>

<script>
// 需要传songlist的  tracks  {name 歌手ar}
import SongList from '@/components/SongList.vue'
import Controller from '@/components/Controller.vue'
import { mapState,mapActions } from 'vuex'
export default {
  name: 'SongDetailLeft',
  computed: {
    ...mapState('songdetail', ['songDetail','songListDetail']),
    // 要传递到控制器的数据
    detail() {
      return {
        // 榜单id
        id: this.songDetail.id,
        // 收藏数
        subscribedCount: this.songDetail.subscribedCount,
        // 转发数
        shareCount: this.songDetail.shareCount,
        // 评论数
        commentCount: this.songDetail.commentCount
      }
    },
    // 创建时间
    createTime(){
          const times =new Date( this.songDetail.createTime)
         const year = times.getFullYear()
         const month = times.getMonth()+1
         const date = times.getDate()
        const createTime=[year,month,date].join('-')
      return createTime
    }
  },
  methods:{
    ...mapActions("songdetail",["getSongDeatilData"])
  },
  components:{
    Controller,
    SongList
  },
  mounted(){
    const songId =localStorage.getItem("id")
    // console.log(songId)
    // alert()
    this.getSongDeatilData(songId)
  
  }
}
</script>

<style lang="less" scoped>
.songDetailLeft {
  width: 640px;
  border-right: 1px solid #ccc;
  padding: 47px 30px 40px 35px;
}

.detail-img {
border: 1px solid rgb(207, 204, 204);
padding: 2px;
height: 208px;
margin-right: 25px;
vertical-align: middle;
  img{
  width: 208px;
  height: 208px;
  }
}
.song-detail{
  width: 415px;
  flex-shrink: 0;

  .detail-title{
      padding-bottom: 10px;
     .icons {
       display: inline-block;
        width: 54px;
        height: 24px;
        background-position: 0 -243px;
        margin-right: 12px;
      }
      .title-h{
        line-height: 24px;
        font-size: 20px;
      }
  }
  
}
.detail-user{
   display: flex;
   align-items: center;
    img{
        width: 35px;
    }
    .detail-userName{
        color: #0c73c2;
        font-size: 12px;
        padding: 0 15px 0 10px;
    }
    .avatar-datetime{
        color: #999;
    }
}
 .detail-tag{
   span{
     border-radius:25px;
     margin-left: 10px;
     padding: 0 13px;
   }
 }
 .Introduction{
   padding-top:8px;
 }
</style>
